<script charset="utf-8"
        src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key={$tcconfig.tencentkey}"></script>
<style type="text/css">
    #container {
        width: 100%;
        height: 80%;
        position: relative;
    }
</style>

<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    
    <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Areamanage_id')}:</label>
    <div class="col-xs-12 col-sm-8">
        <input id="c-areamanage_id" data-rule="required" data-source="tcfence/areamanage/index"
               class="form-control selectpage" name="row[areamanage_id]" type="text"
               value="{$row.areamanage_id|htmlentities}">
    </div>
    </div>
    <div class="form-group">
    <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
    <div class="col-xs-12 col-sm-8">
        <input id="c-name" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
    </div>
    </div>
    
    <div class="form-group" style="width:100%;height:800px;margin:0 auto;">
        <div id='container'></div>
    </div>
    
    <div class="form-group" style="display: none">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-datas" class="form-control" name="row[datas]"  type="text">
        </div>
    </div>
    
    
    <div class="form-group layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
    <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
    <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
    </div>
    </div>
</form>


<script type="text/javascript">
    let geometrys = []
    window.onload = function () {
        initMap();
    }
    /*获取数据*/
    var map, editor;
    function initMap() {
        
        //代码格式化工具对这段代码会造成影响，格式化后记得替换回去：var arr ={:json_encode($pence_list)};
        var arr ={:json_encode($pence_list)};
        
        let f_arr = arr
        let center = {
            lat:JSON.parse(f_arr[0].paths)[0].lat,
            lng:JSON.parse(f_arr[0].paths)[0].lng
        }
        console.log(f_arr)
        let s_arr = []
        for (let index1 in f_arr) {
            s_arr.push({paths: []})
            for (let index2 in JSON.parse(f_arr[index1].paths)) {
                s_arr[index1].paths.push(new TMap.LatLng(JSON.parse(f_arr[index1].paths)[index2].lat, JSON.parse(f_arr[index1].paths)[index2].lng))
            }
        }
        // 初始化地图
        map = new TMap.Map("container", {
            zoom: 16, // 设置地图缩放级别
            center: new TMap.LatLng(center.lat, center.lng) // 设置地图中心点坐标
        });
        
        // 初始化几何图形及编辑器
        editor = new TMap.tools.GeometryEditor({
            map, // 编辑器绑定的地图对象
            overlayList: [ // 可编辑图层
                {
                    overlay: new TMap.MultiPolygon({
                        map,
                        styles: {
                            highlight: new TMap.PolygonStyle({
                                color: 'rgba(255, 255, 0, 0.6)'
                            })
                        },
                        geometries: s_arr
                    }),
                    id: 'polygon',
                    selectedStyleId: 'highlight'
                }
            ],
            actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
            activeOverlayId: 'polygon', // 激活图层
            selectable: true, // 开启点选功能
            snappable: true // 开启吸附
        });
        
        // 监听删除、修改、拆分、合并完成事件
        let evtList = ['delete', 'adjust', 'split', 'union'];
        evtList.forEach(evtName => {
            editor.on(evtName + '_complete', evtResult => {
                console.log(evtName, evtResult);
                delete evtResult.styleId;
                
                if(geometrys.length > 0) {
                    for(let i =0; i<geometrys.length; i++) {
                        if(geometrys[i]['id']==evtResult.id) {
                            geometrys.splice(i, 1)
                        }
                    }
                }
                geometrys.push(evtResult)
                
                var jsons = JSON.stringify(geometrys)
                $('#c-datas').val(jsons)
            });
        });
        
        // 监听拆分失败事件，获取拆分失败原因
        editor.on('split_fail', (res) => {
            alert(res.message);
        });
        // 监听合并失败事件，获取合并失败原因
        editor.on('union_fail', (res) => {
            alert(res.message);
        });
    }
</script>
